<template>
  <a-drawer :open="visible" title="业务员详情" :width="1200" :body-style="{ paddingBottom: '80px', backgroundColor: '#F9F9F9' }" @close="onClose">
    <template #closeIcon>
      <div class="express-bar"></div>
      <div class="express-btn">
        <CloseCircleOutlined :size="32" @click="onClose" />
      </div>
    </template>
    <a-card size="small" title="基本信息">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="编号">{{ options.id }}</a-descriptions-item>
        <a-descriptions-item label="姓名">{{ options.rename }}</a-descriptions-item>
        <a-descriptions-item label="性别">{{ options.sex == 1 ? '男' : '女' }}</a-descriptions-item>
        <a-descriptions-item label="联系电话">{{ options.phone }}</a-descriptions-item>
        <a-descriptions-item label="年龄">{{ options.age }}</a-descriptions-item>
        <a-descriptions-item label="身份证住址">{{ options.address }}</a-descriptions-item>
        <a-descriptions-item label="现居住地">{{ options.live_address }}</a-descriptions-item>
        <!-- <a-descriptions-item label="修改价格权限">{{ options.modify_price_authority ? '是' : '否' }}</a-descriptions-item> -->
        <a-descriptions-item label="创建时间">{{ options.create_time }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'store'">
        <SalesmanStoreTable :enterpriseId="options" />
      </template>
      <template v-if="activeKey === 'information'">
        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="账号">{{ options.username }}</a-descriptions-item>
          <a-descriptions-item label="登录次数">{{ options.login_num }}</a-descriptions-item>
        </a-descriptions>
      </template>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SalesmanStoreTable from './salesman-store-table.vue'
import { inject } from 'vue'
const compactModeClass = inject('compactModeClass')
defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref({})
// 详情tab
const activeKey = ref('store')
const tabList = [
  {
    key: 'store',
    tab: '门店信息'
  },
  {
    key: 'information',
    tab: '账号信息'
  }
]

function showDrawer(item) {
  options.value = item
  visible.value = true
}

const onClose = () => {
  visible.value = false
}
</script>
